<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="page-view-size" content="1920*1080" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">

    <title>河南联通酒店版</title>
    <style>
        
    </style>

</head>

<body style="width: 1920px;height: 1080px;margin:0px;background-color: #4a4a4a" onload="init()">
    <!-- 欢迎页 -->
    <div class="loading" id="loading" style="position: relative; 
        width: 1920px; 
        height: 1080px; 
        top: 0px;
        left: 0px;
        overflow: hidden;
        background-repeat: no-repeat;  
        background-size: cover;  
        background-position: center;
        display: none;">
        <div class="sub-box" style="position: absolute;  
            width: 100%;
            height: 150px;  
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.5);">
            <div class="left-box" style="margin-top: 15px;
                margin-left: 20px;
                position: absolute;
                width: 70%;
                height: 100%;
                left: 0;">
                <p class="left-text" style="margin: 0px;
                    color:rgb(255, 255, 255);
                    font-size: 40px;
                    font-weight: 700;">尊敬的先生/女士，欢迎下榻本酒店。</p>
                <div id="timer-link" class="left-button" style="display: block;
                    margin-top: 10px;
                    width: 200px;
                    height: 50px;
                    padding-left: 25px;
                    border-radius: 25px;
                    background-color: #2c81ff;
                    font-size: 30px;
                    line-height:50px;
                    color: #fff;">点击进入</div>
            </div>
            <div class="right-box" style="position: absolute;
                width: 30%;
                height: 100%;
                right: 0;
                display: flex; 
                justify-content: center;  
                align-items: center; ">
                <div class="datetime" id="right-time" style="width: 200px;
                    float: right;
                    border-right: 1px solid #fff;">
                    <div class="time" id="time" style="font-size: 70px;
                        color: #fff;
                        font-weight: 300;"></div>
                    <div class="date" id="date" style="font-size: 25px;
                        color: #fff;
                        font-weight: 300;"></div>
                </div>
                <div class="weather" id="right-weather" style="width: 200px;
                    margin-left: 20px;">
                    <div class="weather-text" id="weather-text" style="font-size: 70px;
                        color: #fff;
                        font-weight: 300;"></div>
                    <div class="temperacher" id="temperacher" style="font-size: 25px;
                        color: #fff;
                        font-weight: 300;"></div>
                </div>
            </div>
        </div>
    </div>

    <div id="homeIndex" style="display: none;">
        <div style="
            position: absolute; 
            width: 1920px; 
            height: 1080px; 
            top: 0px;
            left: 0px; 
            background-color: #4a4a4a;
            background-repeat: no-repeat;  
            background-size: cover;  
            background-position: center; overflow: hidden;
            ">

            <!-- 顶部logo -->
            <div class="logo"
                style="position: absolute; width:380px; height: 110px; left: 40px; top: 20px;color: #fff;font-size: 22px; line-height:35px; overflow: hidden;">
                <img style="width:380px; height: 110px;" src="./image/logo.png" id="logoImage">
            </div>

            <!--顶部跑马灯-->
            <div class="message-panel"
                style="
                position: absolute; 
                width: 880px; 
                height: 60px; 
                left: 510px; 
                top: 55px;
                vertical-align: middle;
                border-radius: 5px;
                ">
                <div class="icon" 
                    style="
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    width:40px;
                    height: 40px;
                    background-image: url('./image/icon_white.png');
                    background-repeat: no-repeat;  
                    background-size: cover;  
                    background-position: center;
                    ">
                </div>
            </div>
            

            <!-- 天气，时间 -->
            <div style="position: absolute; right: 40px; top: 48px; height: 35px; width: 400px; color: #fff;font-size: 30px; text-align: right;">
                <span id="weather" style="padding-right:10px;border-right:  1px solid #fff;"></span>
                <span id="timeHome"></span>
            </div>

            <!--大屏内容-->
            <div style=" left:40px;top:133px; width: 1367px; height:779px ; overflow: hidden;border-radius: 10px;position: relative;" id="imageobjParent">
                 
                        <img src="./image/home2.webp" style="width: 100%;  
                        height: 100%;object-fit: cover;" id="imageobj1">
                     
            </div>

            <!--右边上角文字-->
            <div style="position: absolute; width: 453px; height: 384px; left: 1422px; top: 135px; background-image: url('./image/welcome.png');">
                <!--内容-->
                <div style="position: absolute; width: 453px; height: 354px;  left: 10px; top: 10px; line-height: 39px; font-size: 33px;color: #fff; overflow: hidden; " id="pmsinfo_mains">
                </div>
            </div>
            <!--右边下角图片-->
            <div style="position: absolute; width: 453px; height: 576px; left: 1422px; top: 534px;">
                <div style="position: absolute; width: 453px; height: 378px; left: 0px; top: 0px; border-radius: 5px; overflow: hidden;">
                    <img src="./image/g.png" width="100%" height="100%" id="m1src0">
                </div>
            </div>

            <!--菜单-->
            <div style="position:absolute; left:0px;top:930px; width: 1920px; height:150px;">
                <div style="position:absolute; left:0px;top:0px; width:1920px; height:150px;" class="menu_parent">
                    <!--焦点-->
                    <div style="position:absolute; left:0px;top:0px; width: 384px; height:150px ; background-image: url('./image/menu_focus.png');     background-repeat:no-repeat;background-size: cover;background-position: center;" id="focusicon">
                    </div>
                    <div class="menu_item" id="menu_item0" style="width: 384px;
                        height: 150px;
                        line-height: 150px;
                        font-size: 45px;
                        position: absolute;
                        top: 0;
                        left: 0;
                        text-align: center;
                        vertical-align: middle;
                        font-weight: 500;
                        color: #fff;
                        overflow: hidden;">
                    </div>
                    <div class="menu_item" style="left:384px;width: 384px;
                        height: 150px;
                        line-height: 150px;
                        font-size: 45px;
                        position: absolute;
                        top: 0;
                        text-align: center;
                        vertical-align: middle;
                        font-weight: 500;
                        color: #fff;
                        overflow: hidden;" id="menu_item1">
                    </div>
                    <div class="menu_item" style="left:768px;width: 384px;
                        height: 150px;
                        line-height: 150px;
                        font-size: 45px;
                        position: absolute;
                        top: 0;
                        text-align: center;
                        vertical-align: middle;
                        font-weight: 500;
                        color: #fff;
                        overflow: hidden;" id="menu_item2">
                    </div>

                    <div class="menu_item" style="left:1152px;width: 384px;
                        height: 150px;
                        line-height: 150px;
                        font-size: 45px;
                        position: absolute;
                        top: 0;
                        text-align: center;
                        vertical-align: middle;
                        font-weight: 500;
                        color: #fff;
                        overflow: hidden;" id="menu_item3">
                    </div>

                    <div class="menu_item" style="left:1536px;width: 384px;
                        height: 150px;
                        line-height: 150px;
                        font-size: 45px;
                        position: absolute;
                        top: 0;
                        text-align: center;
                        vertical-align: middle;
                        font-weight: 500;
                        color: #fff;
                        overflow: hidden;" id="menu_item4">
                    </div>
                </div>
            </div>
        </div>
</body>


</html>
<script src="./config/index.js"></script>
<script src="./js/Utils.js"></script>
<script src="./config/data/epgElement.js"></script>



<script type="text/javascript">
    const loadingBox = document.getElementById('loading');
    var data = HybirdCallBackInterface.getCacheData('twoHtmlStatus')
    // var data = sessionStorage.getItem('twoHtmlStatus');
    if(data){
        loadingBox.style.display = "none"
        document.getElementById('homeIndex').style.display = "block";
    }else{
        loadingBox.style.display = "block"
        document.getElementById('homeIndex').style.display = "none";
    }
    loadingBox.style.backgroundImage = "url('" + allConfig.powerOn + "')"
    document.onkeydown = function (event) {
        if (event.code == "Enter") {
            if(loadingBox.style.display =="none"){
                doSelect();
            }
            if(loadingBox.style.display !="none"){
                loadingBox.style.display = "none"
                HybirdCallBackInterface.putCacheData('twoHtmlStatus',true)
                // sessionStorage.setItem('twoHtmlStatus',true);
                document.getElementById('homeIndex').style.display = "block"
            }
        }
        if (event.code == "ArrowRight") {
            if(loadingBox.style.display =="none"){
                change_list(1);
            }
        }
        if (event.code == "ArrowLeft") {
            if(loadingBox.style.display =="none"){
                change_list(-1);
            }
        }
    }
    get_date_date()
    // 获取right-box元素  
    const rightBox = document.getElementById('right-time');
    function get_date_date() {
        document.getElementById("time").innerHTML = formatDate('hh:ii');
        document.getElementById("date").innerHTML = formatDate('yyyy - mm - dd');
        var weatherList = allConfig.weather.data.forecast;
        document.getElementById("weather-text").innerHTML = '晴';
        document.getElementById("temperacher").innerHTML = '4℃-15℃';
        for (var i = 0; i < weatherList.length; i++) {
            if (formatDate('yyyy-mm-dd') == weatherList[i].ymd) {
                document.getElementById("weather-text").innerHTML = weatherList[i].type;
                document.getElementById("temperacher").innerHTML = weatherList[i].low + "-" + weatherList[i].high;
            }
        }
        setTimeout(function () { get_date_date(); }, 1000);
    }
    function formatDate(format_str){
        format_str =format_str||"yyyy-mm-dd hh:ii:ss"
        var d = new Date();
        var yyyy 	= d.getFullYear();
        var mm 	= d.getMonth()+1;
        if(mm < 10) mm ="0"+mm;
        var dd 	= d.getDate();
        if(parseInt(dd) < 10) dd = "0"+dd;
        var hh  = d.getHours();
        if(parseInt(hh) < 10 ) hh ="0"+hh;
        var ii 	= d.getMinutes();
        if(parseInt(ii) < 10) ii ="0"+ii;
        var ss 	= d.getSeconds();
        return format_str.replace('yyyy',yyyy).replace('mm' ,mm).replace('dd',dd).replace('hh',hh).replace("ii",ii).replace('ss',ss);
    }

    // 获取元素  
    var timerLink = document.getElementById('timer-link');
    // 设置倒计时的初始值（例如10秒）  
    var countdownSeconds = 10;
    // 更新倒计时数字的函数  
    function updateCountdown() {
        // 计算剩余时间（秒）  
        var remainingSeconds = countdownSeconds;
        // 格式化时间（例如显示为"09"而不是"9"）  
        var formattedTime = remainingSeconds < 10 ? '0' + remainingSeconds : remainingSeconds;
        // 更新元素的文本内容  
        timerLink.textContent = '点击进入 ' + formattedTime + "s";
        // 如果倒计时未结束，继续递减  
        if (remainingSeconds > 0) {
            // 每秒更新一次倒计时数字  
            setTimeout(updateCountdown, 1000);
            countdownSeconds = remainingSeconds - 1;
        }
        if (countdownSeconds == 0) {
            setTimeout(function () {
                document.getElementById('loading').style.display = "none"
                document.getElementById('homeIndex').style.display = "block"
            }, 1000);
        }
    }

    // 在页面加载完成后开始递减倒计时  
    updateCountdown();
    function init() {
        const logoImageBox = document.getElementById('logoImage');
        logoImageBox.src = allConfig.logoImage;
        // 时间
        get_date_dateHome();
        // 天气跑马灯
        get_common();
        // 右侧欢迎语
        get_CUSTInfo(allConfig.custInfo);
        // 菜单  图片
        get_element_main();
        get_message_screen();
    }

    function get_CUSTInfo(obj) {
        if (!obj) return false;
        var s = '';
        if (obj.call_name) {
            var ws = "";
            if (+obj.call_name.color) {
                ws += 'color:' + obj.call_name.color + ';';
            }
            if (obj.call_name.font_size) {
                ws += 'font-size: ' + obj.call_name.font_size + 'px;';
            }
            s += '<span style="' + ws + '">' + obj.call_name.value + '</span>';
        }

        if (obj.pms_name) {
            var ws = "";
            if (+obj.pms_name.color) {
                ws += 'color:' + obj.pms_name.color + ';';
            }
            if (obj.pms_name.font_size) {
                ws += 'font-size: ' + obj.pms_name.font_size + 'px;';
            }
            s += '<span style="' + ws + '">' + obj.pms_name.value + ':</span>';
        }

        if (s != "") {
            s += "<br/>";
            s += "<br/>";
        }


        var welcome_name = s;
        if (obj.welcome) {
            var ws = "";
            if (obj.welcome.color) {
                ws += 'color:' + obj.welcome.color + ';';
            }
            if (obj.welcome.font_size) {
                ws += 'font-size: ' + obj.welcome.font_size + 'px;';
            }
            welcome_name += '<span style="' + ws + '">&nbsp;&nbsp;&nbsp;&nbsp;' + obj.welcome.value + '</span>';
        }


        document.getElementById("pmsinfo_mains").innerHTML = welcome_name;

    }

    function get_bg() {
        if (epgElementData.EPGElement) {
            if (epgElementData.EPGElement.data) {
                if (epgElementData.EPGElement.data.bg) {
                    var bg_list = epgElementData.EPGElement.data.bg;
                    if (bg_list.length > 0 && bg_list[0].bg.content.length > 0) {
                        var src = bg_list[0].bg.content[0].url;
                        document.getElementById("epg_background_bg").style.backgroundImage = 'url(' + src + ')';
                    }
                }
            }
        }
    }
    // 天气时间
    function get_common() {
        if (allConfig.weather) {
            get_weather(allConfig.weather);
        }
        if (allConfig.message) {
            document.getElementsByClassName('message-panel')[0].insertAdjacentHTML('beforeend','<marquee class="content" style="width: 100%;height: 100%;position: absolute;left: 45px;top: 0px;overflow: hidden;font-size: 30px;line-height: 40px;color: #fff" behavior="scroll" id="panelrolldiv">'+allConfig.message[0].msg+'</marquee>');
            
        }
    }

    // 俩图滚动
    function get_message_screen() {
        if (allConfig.messageScreenData) {
            document.getElementById("imageobj1").src = allConfig.messageScreenData
            // document.getElementById("imageobj2").src = allConfig.messageScreenData[0].pcitrue[1].url
        }
    }
    // 获取菜单数据
    function get_element_main() {
        if (epgElementData.EPGElement) {
            if (epgElementData.EPGElement.data) {
                if (epgElementData.EPGElement.data.main) {
                    menu_list = epgElementData.EPGElement.data.main;
                }

                if (epgElementData.EPGElement.data.image) {
                    image_list = epgElementData.EPGElement.data.image;
                }
            }
        }
        init_image();
        init_menu();
    }

    var image_list = [];
    // 右下角图片
    function init_image() {
        if (image_list[0].image.content.length > 0) src = image_list[0].image.content[0].url;
        if (src == "") src = "image/g.png";
        document.getElementById("m1src0").src = src;
    }
    // 获取时间
    function get_date_dateHome() {
        document.getElementById("timeHome").innerHTML = formatDate('hh:ii');
        setTimeout(function () { get_date_dateHome(); }, 1000);
    }
    // 获取天气
    function get_weather(obj) {
        if (!obj) return false;
        var weathers = "";
        var weatherList = obj.data.forecast;
        for (var i = 0; i < weatherList.length; i++) {
            if (formatDate('yyyy-mm-dd') == weatherList[i].ymd) {
                weathers = weathers + weatherList[i].type + "&nbsp;" + weatherList[i].low + "~" + weatherList[i].high;
            }
        }
        document.getElementById("weather").innerHTML = weathers;
    }
    var langbox = {
        distance:384,
        leftPosition:0,
        localPosition:0
    };

    var menu_list = [];

    // 菜单初始化
    function init_menu() {
        for(var k=0;k<menu_list.length;k++){
            var title = menu_list[k].menu.content.title;
            document.getElementById("menu_item" + k).innerHTML = title;
        }
        // var data = HybirdCallBackInterface.getCacheData('twoHtmlStatus')
        // var data = parseInt(sessionStorage.getItem('itemId'));
        var data2 = parseInt(HybirdCallBackInterface.getCacheData('itemId'));

        // 设置焦点初始位置
        if(data2){
            document.getElementById('focusicon').style.left=langbox.distance*data+"px"
            langbox.localPosition = langbox.distance*data
            langbox.leftPosition=data
        }else{
            document.getElementById('focusicon').style.left=0+"px"
            langbox.localPosition =  0
            langbox.leftPosition=0
        }

    }
    
    //左右
    function change_list(num) {
        if((langbox.leftPosition==(menu_list.length-1))&&num==1){
            return 
        }
        if(langbox.leftPosition==0&&num==-1){
            return
        }
        document.getElementById('focusicon').style.left=(langbox.localPosition+langbox.distance*num)+"px";
        langbox.leftPosition =langbox.leftPosition+num;
        langbox.localPosition = langbox.localPosition+langbox.distance*num;
    }
    // 进入二级页面
    function doSelect() {
        if (menu_list.length == 0) return false;
        var url = menu_list[langbox.leftPosition].menu.content.url;
        if (url) {
            if (url == 'HybirdCallBackInterface.openMainActivity()') {
                HybirdCallBackInterface.putCacheData('itemId',"0")
                HybirdCallBackInterface.putCacheData('twoHtmlStatus',"true")
                // sessionStorage.setItem('itemId',0);
                // var data = sessionStorage.setItem('twoHtmlStatus',true);
                // 进入高清电视
                HybirdCallBackInterface.openMainActivity()
            } else {
                HybirdCallBackInterface.putCacheData('itemId',JSON.stringify(langbox.leftPosition))
                HybirdCallBackInterface.putCacheData('twoHtmlStatus',"true")
                // sessionStorage.setItem('itemId',langbox.leftPosition);
                // 进入其他二级页面
                window.location.href = url;
            }
        }
    }
    




</script>